<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="/simditor-2.3.6/styles/simditor.css" />
    <style>
        .header {
            height: 70px;
            background-color: #f8f8f8;
        }

        .header-left {
            width: 50%;
            line-height: 70px;
            text-align: center;
            float: left;
        }

        .header-right {
            width: 50%;
            float: left;
            line-height: 70px;
            text-align: center;
        }

        .gallery-text {
            color: black;
            text-decoration: none;
            font-family: "Arial", "Microsoft YaHei", "黑体", "宋体", sans-serif;
            font-size: 20px;
            letter-spacing: 2px;
        }

        .logo {
            margin-top: -10px;
        }

        .dropdown-menu {
            background-color: #f8f8f8;
        }

        .container {
            height: 800px;
            width: 100%;
            background: url("/images/bg.jpg") no-repeat;
            background-size: 100% 100%;
        }

        .title-box {
            width: 60%;
            margin-top: 7%;
            margin-left: 20%;
            color: #000000;
            text-align: center;
        }

        .footer {
            height: 200px;
            background-color: #f8f8f8;
        }

        #about {
            width: 50%;
            height: 150px;
            float: left;
            text-align: center;
        }

        #link {
            width: 50%;
            height: 150px;
            float: left;
            text-align: center;
        }

        #link ul {
            text-align: left;
            margin-left: 20%;
        }

        #link ul li {
            list-style: none;
        }

        .copy-right {
            line-height: 50px;
            text-align: center;
        }

        #container {
            width: 100%;
            height: 800px;
            background: url("/images/user_center_bg.jpg");
            background-size: 100% 100%;
        }

        .modal-body {
            width: 100%;
            height: 600px;
            padding: 0 0;
        }

        .index {
            width: 100%;
            height: 7%;
            line-height: 7%;
            text-align: center;
        }

        #logo {
            margin-top: -10px;
        }
        .profile{
            width: 100%;
            height: 93%;
        }
        .profile-left{
            float: left;
            width: 30%;
            height: 100%;
        }
        .profile-right{
            float: left;
            width: 70%;
            height: 100%;
        }
        .profile-left-top{
            width: 100%;
            height: 30%;
        }
        .profile-left-bottom{
            width: 100%;
            height: 70%;
        }
        #profile-img{
            width: 100%;
            height: 100%;
        }
        .button{
            width: 100%;
            height: 20%;
        }
    </style>
</head>
<#include "../public/head.ftl"/>
<div id="container">

</div>

<div class="modal show" tabindex="-1" role="dialog" style="opacity: 0.8">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <div class="index">
                    <a href="/">
                        <img src="/images/logo.png" id="logo"><h4 style="color: black; display: inline-block">YIHUU</h4>
                    </a>
                </div>
                <div class="profile">
                    <div class="profile-left">
                        <div class="profile-left-top">
                            <img src="/images/3.jpg" id="profile-img">
                        </div>
                        <div class="profile-left-bottom">
                            <button class="button" type="info">个人信息</button>
                            <button class="button" type="change">修改信息</button>
                            <button class="button" type="record">浏览记录</button>
                            <button class="button" type="shoucang">我的收藏</button>
                            <button class="button" type="comment">我的评论</button>
                        </div>
                    </div>
                    <div class="profile-right" style="padding: 20px">
                        <div class="_profile" type="info">
                            <table class="table table-striped">
                                <tr style="margin-top: 20px">
                                    <td style="font-weight: bold;">用户id</td>
                                    <td>${(Session.current_user.uid)!}</td>
                                </tr>
                                <tr>
                                    <td>用户名</td>
                                    <td>${(Session.current_user.uname)!}&nbsp;&nbsp;<a href="#">修改</a></td>
                                </tr>
                                <tr>
                                    <td>用户年龄</td>
                                    <td>${(Session.current_user.uage)!}&nbsp;&nbsp;<a href="#">修改</a></td>
                                </tr>
                                <tr>
                                    <td>用户电话</td>
                                    <td>${(Session.current_user.uphone)!}&nbsp;&nbsp;<a href="#">修改</a></td>
                                </tr>
                                <tr>
                                    <td>用户邮箱</td>
                                    <td>${(Session.current_user.email)!}&nbsp;&nbsp;<a href="#">修改</a></td>
                                </tr>
                                <tr>
                                    <td>用户地址</td>
                                    <td>${(Session.current_user.uaddr)!}&nbsp;&nbsp;<a href="#">修改</a></td>
                                </tr>
                                <tr>
                                    <td>用户有效</td>
                                    <td>${(Session.current_user.valid)?string("有效","无效")}</td>
                                </tr>

                            </table>
                        </div>
                        <div class="_profile" type="change" style="display: none">
                            <div id="ulove">
                                <h4 style="border-bottom: solid black 1px">用户爱好<a href="#" class="btn btn-warning btn-xs">修改</a></h4>
                               <div style="width: 25%;float: left"><input type="checkbox"/>1</div>
                               <div style="width: 25%;float: left"><input type="checkbox"/>1</div>
                               <div style="width: 25%;float: left"><input type="checkbox"/>1</div>
                               <div style="width: 25%;float: left"><input type="checkbox"/>1</div>
                               <div style="width: 25%;float: left"><input type="checkbox"/>1</div>
                               <div style="width: 25%;float: left"><input type="checkbox"/>1</div>
                               <div style="width: 25%;float: left"><input type="checkbox"/>1</div>
                               <div style="width: 25%;float: left"><input type="checkbox"/>1</div>
                            </div>
                            <div id="udesc-box">
                                <h4 style="border-bottom: solid black 1px">用户描述<a href="#" class="btn btn-warning btn-xs">修改</a></h4>
                                <textarea id="udesc" cols="50" rows="5"></textarea>
                            </div>
                        </div>
                        <div class="_profile" type="record" style="display: none">3</div>
                        <div class="_profile" type="shoucang" style="display: none">4</div>
                        <div class="_profile" type="comment" style="display: none">5</div>
                    </div>
                </div>
            </div>
        </div><!-- /.modal-content &ndash;&gt;-->
    </div><!-- /.modal-dialog &ndash;&gt;-->
</div><!-- /.modal -->
<#include "../public/footer.ftl">
<script type="text/javascript" src="/simditor-2.3.6/scripts/jquery.min.js"></script>
<script type="text/javascript" src="/simditor-2.3.6/scripts/module.js"></script>
<script type="text/javascript" src="/simditor-2.3.6/scripts/hotkeys.js"></script>
<script type="text/javascript" src="/simditor-2.3.6/scripts/uploader.js"></script>
<script type="text/javascript" src="/simditor-2.3.6/scripts/simditor.js"></script>
<script>
    $(function () {
        $("button[class='button']").click(function () {
            var type=$(this).attr("type");
            $("._profile").each(function () {
               if($(this).attr("type") == type){
                   $(this).show();
               }else{
                   $(this).hide();
               }
            });
        });

        var editor=new Simditor({
            textarea: $('#udesc')
            //optional options
        });
    });
</script>